<template>
  <div>
    <el-upload :action="action" list-type="picture-card"
            ref="uploadimg"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :show-file-list="true"
            :file-list="fileList"
            :headers="Headers"
            :on-success="handlSuccess">
            <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    action:String,
    dialogImageUrl: String,
    fileList:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
    data(){
        return{
            dialogVisible: false,
            Headers:{
             token: JSON.parse(localStorage.getItem('token') || '{}')
            }
        }
    },
    methods: {
    
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        console.log(file)
        this.dialogVisible = true;
      },
      handlSuccess(response){
        console.log(response)
        console.log(this.fileList)
        this.$emit('Sendimg',response)
        this.$emit('Sendimg1',response)
      },
      clear(){
        this.$refs.uploadimg.clearFiles()
      }
    }
}
</script>

<style scoped>

</style>